<!-- eslint-disable vue/return-in-computed-property -->
<template>
  <div>
<van-nav-bar title="城市列表"  background-color="#21b97a" left-arrow @click-left="onClickLeft"/>
<van-index-bar :index-list="indexList">

      <van-index-anchor :index="item" v-for="(item,index) in indexList" :key='index'>
     {{getTitle(item)}}
     <van-cell :title="res.label" v-for="res in City[item]" :key='res.short'/>
      </van-index-anchor>

</van-index-bar>
  </div>
</template>

<script>
import { hotCityApi, quApi } from '@/api'
export default {
  data () {
    return {
      indexList: ['#', '热', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
        'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      hotCity: [],
      allCity: [],
      City: {}
    }
  },
  async created () {
    const res2 = await quApi({ level: 1 })
    this.allCity = res2.data.body
    this.Cityfilt()
    const res = await hotCityApi()
    this.City['热'] = res.data.body
    console.log(this.City)
  },
  methods: {
    onClickLeft () {
      history.back()
    },
    getTitle (val) {
      if (val === '#') {
        return '当前城市'
      } else if (val === '热') {
        return '热门城市'
      } else {
        return val
      }
    },
    Cityfilt () {
      this.indexList.map(item => {
        const arr = this.allCity.filter(res => {
          return res.short.substring(0, 1).toUpperCase() === item
        })
        this.City[item] = arr
      })
    }
  }

}
</script>

<style>
.van-index-bar__index{
margin-bottom:6px;
}
</style>
